import 'dart:async';

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

// 定义一个名为ClockScreen的类，它继承自StatefulWidget。StatefulWidget是Flutter中用于保存状态的自定义小部件。
class ClockScreen extends StatefulWidget {
  // 构造函数的定义，它接受一个可选的Key参数。
  const ClockScreen({Key? key}) : super(key: key);

  // 覆写createState方法，这是StatefulWidget必须的。它返回一个_ClockScreenState对象，用于管理ClockScreen的状态。
  @override
  State<ClockScreen> createState() => _ClockScreenState();
}

// 定义一个名为_ClockScreenState的类，它继承自State<ClockScreen>。这是Flutter的stateful widget模式的一部分，用于保存和更新小部件的状态。
class _ClockScreenState extends State<ClockScreen> {
  // 定义一个名为_timer的变量，它是Timer类型。Timer在Flutter中用于周期性执行代码。
  late Timer _timer;

  // 覆写initState方法，这是State类必须的。它在state被创建和初始化时调用。
  @override
  void initState() {
    // 调用父类的initState方法，确保父类的初始化逻辑被执行。
    super.initState();
    // 调用_startTimer方法来启动定时器。
    _startTimer();
  }

  // 定义_startTimer方法来启动定时器。
  void _startTimer() {
    // 定义一个持续时间为一秒的Duration对象。
    const oneSec = Duration(seconds: 1);
    // 使用Timer.periodic创建一个周期性执行的Timer，每隔一秒钟触发一次。每次触发时，都会调用setState方法来更新小部件的状态。
    _timer = Timer.periodic(oneSec, (Timer t) {
      setState(() {});
    });
  }

  // 覆写dispose方法，这是State类必须的。它在state被销毁前调用。
  @override
  void dispose() {
    // 取消定时器，避免内存泄漏。
    _timer.cancel();
    // 调用父类的dispose方法，确保父类的清理逻辑被执行。
    super.dispose();
  }

  // 覆写build方法，这是Widget类必须的。这个方法定义了小部件的UI结构。
  @override
  Widget build(BuildContext context) {
    // 获取当前的日期和时间。
    final DateTime now = DateTime.now();
    // 使用DateFormat将当前时间格式化为'HH:mm:ss'格式的字符串。
    final String formattedTime = DateFormat('HH:mm:ss vvvv').format(now);
    final String formattedDate = DateFormat('yyyy.MM.dd  at ').format(now);

    // 使用Scaffold和Center小部件创建一个简单的UI，其中包含一个显示格式化时间的Text小部件。文本样式被设置为字体大小为24.0。
    // return Scaffold(
    //   body: FittedBox(
    //     fit: BoxFit.cover,
    //     child: Text(
    //       formattedTime,
    //       style: TextStyle(
    //         fontSize: MediaQuery.of(context).size.width * 0.3,
    //       ),
    //     ),
    //   ),
    // );

    return Scaffold(
      appBar: AppBar(
        title: const Text('时钟'),
        elevation: 0,
      ),
      body: Container(
          padding: const EdgeInsets.all(10),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              FittedBox(
                fit: BoxFit.cover,
                child: Text(
                  formattedTime,
                  style: TextStyle(
                    fontSize: MediaQuery.of(context).size.width * 0.3,
                  ),
                ),
              ),
              FittedBox(
                fit: BoxFit.cover,
                child: Text(
                  formattedDate,
                  style: TextStyle(
                    fontSize: MediaQuery.of(context).size.width * 0.3,
                  ),
                ),
              ),
            ],
          )),
    );
  }
}
